<template>
  <div>
    <div class="drawer" :class="{ expanded: isExpanded }">
      第一行内容
      <div v-if="isExpanded" class="content">
        <p>第二行内容</p>
        <p>第三行内容</p>
        <p>第四行内容</p>
      </div>
    </div>
    <div class="toggle-button" @click="toggleDrawer">展开/折叠</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isExpanded = ref(false);

const toggleDrawer = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style scoped>
.drawer {
  border: 1px solid #ccc;
  padding: 10px;
  max-height: 50px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.drawer.expanded {
  max-height: 500px; /* 根据实际内容调整高度 */
}
.content {
  margin-top: 10px;
}
.toggle-button {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
  margin-top: 10px;
}
</style>
<!-- <template>
  <div>
    <el-card shadow="none">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template #title>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <span>商品搜索表单</span>
              <el-button type="text" @click="toggleCollapse">{{
                isCollapsed ? "展开" : "收起"
              }}</el-button>
            </div>
          </template>
          <el-form
            :model="form"
            label-width="auto"
            inline="true"
            
          >
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品分类">
              <el-select
                v-model="form.region"
                placeholder="please select your zone"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const activeNames = ref(["1"]);
const isCollapsed = ref(true);

const handleChange = (val) => {
  console.log(val);
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const form = ref({
  name: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!", form.value);
};
</script>

<style scoped></style> -->
